import React, { Component,PureComponent } from 'react'
import PubSub from "pubsub-js";
import store from "../../store";
import Swiper  from "swiper/swiper-bundle.js"
import "swiper/swiper-bundle.css";
import {SDetBanner ,SDetailInfo} from "../../styled/details"
import { withRouter } from 'react-router-dom';
import {apilink} from "../../api/apilink";
import { message, Button, Space } from 'antd';
class oneDetails extends PureComponent {
    constructor(props){
        super(props)
        this.state = {
            detailsInfo:"",
            detIdInfo:""
        }
        // store.subscribe(()=>{
        //     PubSub.subscribe("chuanzhi",(a,b)=>{
        //         console.log(a);
        //         console.log(b);
        //        this.setState({
        //            detailsInfo:b
        //        })
        //     })
        // })
    }
    componentDidMount(){
            // console.log("welcome_onede")
            // PubSub.subscribe("chuanzhi",(thingname,data)=>{
            //     console.log(thingname);
            //     console.log(data);
            //     if(data){
            //         console.log("datayouzhi")
            //         this.setState({
            //             detailsInfo:data
            //         })
            //     }else{
            //         console.log("data没值")
            //     }
            // })
        // console.log(this.props.match.params.id)
        if(store.getState().indexReducer.state){
            store.getState().indexReducer.state.forEach((item,index)=>{
                if(item.id == this.props.match.params.id){
                    this.setState({
                        detIdInfo:item
                    },()=>{
                        console.log(this.state.detIdInfo)
                    })
                }
            })
        }
        // console.log(store.getState().indexReducer.state)
        //轮播图
        new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            loop: true,
            freeMode: true,
            loopedSlides: 5, //looped slides should be the same
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            observer: true,
            observerParents: true,
          });
         new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop: true,
            observer: true,
            observerParents: true,
            loopedSlides: 5, //looped slides should be the same
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            thumbs: {
              swiper: new Swiper('.gallery-thumbs', {
                spaceBetween: 10,
                slidesPerView: 4,
                loop: true,
                freeMode: true,
                loopedSlides: 5, //looped slides should be the same
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
                observer: true,
                observerParents: true,
              })
            },
          });
    }
    swiper=()=>{
        let newarr = this.state.detIdInfo.detailsImg.split(",")

        return newarr.map((item,index)=>{
            return (
                <div className="swiper-slide" style={{backgroundImage: `url("${item}")`}}></div>
            )
        })
    }
    //往购物车添加商品
    addCart(){
        if(sessionStorage.getItem("userId")){
            let usp = new URLSearchParams();
                usp.append("userId",sessionStorage.getItem("userId"));
                usp.append("listGoodsId",this.props.match.params.id);
            apilink("/api/addCart","post",usp).then((ok)=>{
                console.log(ok);
                if(ok.data == "add_success"){
                    message.success('添加成功');//antd 气泡提示
                    return
                }
                if(ok.data == "add_cf_success"){
                    message.success('添加成功 +1');
                }else{
                    message.warning('错误')
                }

            }).catch((err)=>{
                console.log(err)
            })

        }else{
            alert("您还未登录，请先登录")
            this.props.history.push("/login")
        }
    }
    render() {
        let {color,detailsId,detailsImg,id,kind,mainImg,price,title,productNumber,productData,productInfo,detailsProductInfo} = this.state.detIdInfo
        return (
            <div>

                <SDetBanner>
                <p>{this.state.detIdInfo?this.swiper():'null'}</p>
                <div className="swiper">
                        {/* //上面的大轮播图 */}
                    <div className="swiper-container gallery-top">
                        <div className="swiper-wrapper">
                        {this.state.detIdInfo?this.swiper():'null'}
                        </div>
                        {/* 左右按钮 */}
                        <div className="swiper-button-next swiper-button-white"></div>
                        <div className="swiper-button-prev swiper-button-white"></div>
                    </div>
                    <div className="swiper-container gallery-thumbs">
                    <div className="swiper-wrapper">
                    {/* 缩略图· */}
                   {this.state.detIdInfo?this.swiper():'null'}
                    </div>
                    </div>
                </div>
                {/* 购物车 */}
                <div className="info">
                    <span></span>
                    <h4>{title+" "}</h4>
                    <p><span>{kind}</span>,<span>{color}</span></p>
                    price: <b>￥ {price}</b><br/>
                    <button onClick={this.addCart.bind(this)}>加入购物袋</button>
            
                {/* <div className="info">
                    <h4>{title+" "}</h4>
                    <p><span></span><span></span>￥<b></b></p>
                    <button>加入购物袋</button>
                </div> */}
                </div>
                </SDetBanner>
                <SDetailInfo>
                <div className="bottom">
                <div  className="left">
                    <hr/>
                    <p>发货与退货</p>
                    <hr/>
                    <p>馈赠服务</p>
                </div>
                <div className="right">
                    <h2>产品详情</h2>
                    <p></p>
                    <ul>
                        <li>产品编号： {productNumber   }</li>
                        <li>系列： {title}</li>
                        <li>颜色：{color}</li>
                        <li>长度: {productInfo}</li>
                        <li>物料：{productData}</li>
                        <li>详细介绍：{detailsProductInfo}</li>
                    </ul>

                </div>
                </div>
                </SDetailInfo>
            </div>
        )
    }
}
export default withRouter(oneDetails)